import {
    AfterViewInit,
    Component,
    ElementRef,
    Input,
    OnChanges,
    OnInit,
    Renderer2,
    SimpleChanges,
    ViewChild
} from '@angular/core';


@Component({
    selector: 'app-svg-editor',
    templateUrl: 'index.html',
    styleUrls: ['index.scss']
})
export class SvgEditorComponent implements AfterViewInit, OnChanges , OnInit{
    @Input() code = '<svg #div t="1654930674002" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6484" width="200" height="200"><path d="M896 480c-1.344 0-2.464 0.608-3.744 0.768-1.28-0.16-2.432-0.768-3.744-0.768H544V132c0-0.704-0.352-1.312-0.416-2.016 0.064-0.672 0.416-1.28 0.416-1.984a32 32 0 0 0-32-32C282.624 96 96 282.624 96 512s186.624 416 416 416 416-186.624 416-416a32 32 0 0 0-32-32zM512 864C317.92 864 160 706.08 160 512 160 328.704 300.864 177.856 480 161.632V512a32 32 0 0 0 32 32h350.368C846.144 723.136 695.296 864 512 864zM625.664 178.72a355.36 355.36 0 0 1 216.832 211.84 32 32 0 1 0 60.064-22.048 414.24 414.24 0 0 0-256.224-250.336 31.968 31.968 0 1 0-20.672 60.544z" p-id="6485"></path></svg>';
    @ViewChild('divElement') divElement: ElementRef;
    @Input()
    ration = 1;

    constructor(private el: ElementRef, private _renderer2: Renderer2) {
    }

    ngOnInit(): void {
    }


    ngOnChanges(changes: SimpleChanges): void {
        if (this.divElement){
            this.divElement.nativeElement.innerHTML = this.code;
            this.setDiv();
        }
    }

    ngAfterViewInit(): void {
        this.divElement.nativeElement.innerHTML = this.code;
        this.setDiv();
    }

    /**
     * 设置图像宽高
     */
    setDiv(){
        this.el.nativeElement.parentElement.style.textAlign = 'center';
        const querySelector = this.divElement.nativeElement.querySelector('svg');
        if (querySelector){
            querySelector.style.height = querySelector.height.animVal.value * this.ration;
            querySelector.style.width =  querySelector.height.animVal.value * this.ration;
        }
    }

}
